<template>
  <div class="label-search-wrapper">
    <div class="tabs-ul">
      <div
        v-for="(item, index) in tabsDataList"
        :key="index"
        class="tabs-li"
        :class="{ active: currentIndex === index }"
        @click="handleTabClick(item, index)"
      >
        {{ item.label }}
      </div>
    </div>

    <div class="select-box">
      <component :is="currentSelectGroup" />
      <!-- <LandSelectGroup /> -->
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import LandSelectGroup from './LandSelectGroup.vue'
// import BuildingSelectGroup from './BuildingSelectGroup.vue'
// import WorkshopSelectGroup from './WorkshopSelectGroup.vue'
// import DepositorySelectGroup from './DepositorySelectGroup.vue'
// import ShopSelectGroup from './ShopSelectGroup.vue'
export default Vue.extend({
  components: {
    LandSelectGroup,
    // BuildingSelectGroup,
    // WorkshopSelectGroup,
    // DepositorySelectGroup,
    // ShopSelectGroup,
    BuildingSelectGroup: () => import('./BuildingSelectGroup.vue'),
    WorkshopSelectGroup: () => import('./WorkshopSelectGroup.vue'),
    DepositorySelectGroup: () => import('./DepositorySelectGroup.vue'),
    ShopSelectGroup: () => import('./ShopSelectGroup.vue'),
  },
  data() {
    return {
      currentIndex: 0,
      tabsDataList: [
        {
          label: '土地',
          name: 'LandSelectGroup',
        },
        {
          label: '写字楼',
          name: 'BuildingSelectGroup',
        },
        {
          label: '厂房',
          name: 'WorkshopSelectGroup',
        },
        {
          label: '仓库',
          name: 'DepositorySelectGroup',
        },
        // {
        //   label: '商铺',
        //   name: 'ShopSelectGroup',
        // },
      ],
    }
  },
  computed: {
    currentSelectGroup() {
      return this.tabsDataList[this.currentIndex].name
    },
  },
  methods: {
    handleTabClick(item, index) {
      console.log('%c [ item ]-66', 'font-size:13px; background:pink; color:#bf2c9f;', item)
      if (this.currentIndex === index) return
      this.currentIndex = index
    },
  },
})
</script>
<style lang="scss" scoped>
.label-search-wrapper {
  background-color: #0062ff;
  padding: 30px 25px;

  .tabs-ul {
    display: flex;
    color: #fff;
    margin-bottom: 50px;

    .tabs-li {
      margin-right: 2px;
      padding: 8px 15px;
      border-radius: 4px;
      cursor: pointer;
    }

    .active {
      color: #0062ff;
      background-color: #fff;
      transition: 0.5s all;
      font-weight: bold;
    }
  }
}
</style>
